<template>
  <div>
    <h1>用户列表</h1>
    <!-- <input type="file" @change="handleFileUpload"> -->
    <input type="file" @change="handleFileUpload"  style="display: none;">
    <button type="button" class="mui-btn mui-btn-primary" @click="openUploadDialog">上传 Excel 文件</button>
    <button type="button" class="mui-btn mui-btn-primary" @click="exportToExcel">导出 Excel</button>
    <table>
      <thead>
        <tr>
          <th>ID</th>
          <th>用户名</th>
          <th>电子邮件</th>
          <th>创建时间</th>
          <th>积分</th>
          <th>选项</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="user in userList" :key="user.id">
          <td>{{ user.id }}</td>
          <td>{{ user.username }}</td>
          <td>{{ user.email }}</td>
          <td>{{ user.create_time }}</td>
          <td>{{ user.points }}</td>
          <td>
            <button type="button" class="mui-btn mui-btn-primary" @click="modifyPoints(user)">修改积分</button>
            <button type="button" class="mui-btn mui-btn-danger" @click="deleteUser(user.id)">删除</button>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
import * as XLSX from 'xlsx'
export default {
  data() {
    return {
      userList: [],
      nonExistentUsernames: []
    };
  },
  mounted() {
    this.fetchUserList();
  },
  methods: {
    
    openUploadDialog() {
      // 清空不存在的用户名列表
      this.nonExistentUsernames = [];
      // 打开文件选择对话框
      const fileInput = document.querySelector('input[type="file"]');
      fileInput.click();
    },
    fetchUserList() {
      this.$http
        .get('/user/users')
        .then((response) => {
          this.userList = response.data.data;
        })
        .catch((error) => {
          console.error('获取用户列表失败:', error);
        });
    },
    deleteUser(userId) {
      this.$http
        .delete(`/user/user/${userId}`)
        .then(() => {
          // 删除成功后刷新用户列表
          this.fetchUserList();
        })
        .catch((error) => {
          console.error('删除用户失败:', error);
        });
    },
    modifyPoints(user) {
      const oldValue = user.points;
      const newValue = prompt(`请输入新的积分值（当前值为 ${oldValue}）：`, oldValue);
      if (newValue !== null && newValue !== '' && parseInt(newValue) !== oldValue) {
        this.savePoints(user.id, parseInt(newValue));
      }
    },
    savePoints(userId, points) {
      this.$http
        .put(`/user/user/${userId}/points`, { points })
        .then(() => {
          // 积分修改成功后刷新用户列表
          this.fetchUserList();
          console.log('积分修改成功！');
        })
        .catch((error) => {
          console.error('修改用户积分失败:', error);
        });
    },
    handleFileUpload(event) {
      const file = event.target.files[0];
      // 创建一个 FileReader 对象来读取上传的文件
      const reader = new FileReader();
      reader.onload = (e) => {
        const contents = e.target.result;
        // 调用后端接口来处理上传的文件内容
        this.uploadExcelFile(contents);
      };

      // 使用 FileReader 读取文件内容
      reader.readAsBinaryString(file);
    },
    uploadExcelFile(contents) {
      // 将文件内容发送到后端进行处理
      this.$http
        .post('/user/upload-excel', { contents })
        .then((response) => {
          console.log(response.data); // 处理成功响应的数据

          // 更新用户列表
          this.fetchUserList();

          // 判断是否存在不存在的用户名
          if (response.data.usernames && response.data.usernames.length > 0) {
            this.nonExistentUsernames = response.data.usernames;

            // 弹窗提醒用户名不存在
            alert('以下用户名不存在：' + this.nonExistentUsernames.join(', '));
          } else {
            this.nonExistentUsernames = [];
            alert(response.data.msg)
          }
        })
        .catch((error) => {
          console.error('上传 Excel 文件失败:', error);
        });
    },
    s2ab(s) {
      const buf = new ArrayBuffer(s.length);
      const view = new Uint8Array(buf);
      for (let i = 0; i < s.length; i++) {
        view[i] = s.charCodeAt(i) & 0xff;
      }
      return buf;
    },
    exportToExcel() {
  // 创建 Excel 文件的工作簿（Workbook）
  const workbook = XLSX.utils.book_new();

  // 创建 Excel 文件的工作表（Worksheet）
  const worksheet = XLSX.utils.json_to_sheet(this.userList);

  // 将工作表添加到工作簿
  XLSX.utils.book_append_sheet(workbook, worksheet, '用户列表');

  // 将工作簿转换为二进制数据
  const excelData = XLSX.write(workbook, { type: 'binary', bookType: 'xlsx' });

  // 将二进制数据转换为 Blob 对象
  const blob = new Blob([this.s2ab(excelData)], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });

  // 创建下载链接并点击下载
  const link = document.createElement('a');
  link.href = URL.createObjectURL(blob);
  link.download = '用户列表.xlsx';
  link.click();
}

  }
};
</script>

<style scoped>
table {
  width: 100%;
  border-collapse: collapse;
}

th,
td {
  padding: 8px;
  text-align: left;
  border-bottom: 1px solid #ddd;
}
</style>